<template>
  <a-spin :spinning="isLoading" class="photo-wrapper">
    <div style="display:flex;justify-content:space-between">
      <div style="width: 50%">
        <h2>拍摄预览：</h2>
        <p>
          <img id="ImgMain" src="" alt="" width="532" height="380"/>
        </p>
      </div>
      <div style="width: 50%">
        <h2>图片预览：</h2>
        <p>
          <img id="snapshot" src="" alt="" width="532" height="380"/>
        </p>
      </div>
    </div>
    <div>
      <a-row :gutter="48">
        <a-col :span="24">
          <a-button style="margin-right: 10px" type="primary" @click="handleOpenCamera">打开视频</a-button>
          <a-button style="margin-right: 10px" type="primary" @click="handleCloseCamera">关闭视频</a-button>
          <a-button style="margin-right: 10px" type="primary" @click="onClearPhoto">清除图片</a-button>
          <a-button style="margin-right: 10px" type="primary" @click="onGeneratePhoto">拍照</a-button>
          <a-button type="primary" @click="checkedAndUploadBase64">上传</a-button>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script>
import {getDevice,closeCamera,getPhotoBase64,URL} from "@/utils/photo"

export default {
  data() {
    return {
      isLoading: false,
      camidx: '0',
      imgBase64: null,
    }
  },
  destroyed() {
    this.handleCloseCamera()
  },
  async mounted() {
    await this.handleOpenCamera()
  },
  methods: {
    getDevice() {
      getDevice().then(({ data: res }) => {
        if (res.code === '0') {
        } else {
          this.$message.error(new Date().toLocaleString() + '\t' + '获取设备失败')
        }
      })
    },
    // 打开摄像头
    handleOpenCamera() {
      document.getElementById('ImgMain').src = ''
      document.getElementById('ImgMain').src = URL + '/video=stream&camidx=' + this.camidx
    },
    // 关闭摄像头
    async handleCloseCamera() {
      // this.isLoading = true
      // await closeCamera(JSON.stringify({ camidx: this.camidx })).then(({ data: res }) => {
      //   if (res.code === '0') {
      //     document.getElementById('ImgMain').src = ''
      //   } else {
      //     this.$message.error(new Date().toLocaleString() + '\t' + '关闭视频失败')
      //   }
      // })
      // this.isLoading = false
    },
    async onGeneratePhoto() {
      this.isLoading = true
      const formData = {
        filepath: 'base64',
        rotate: '0',
        camidx: this.camidx,
        cutpage: '0'
      }
      await getPhotoBase64(JSON.stringify(formData)).then(({ data: res }) => {
        if (res.code === '0') {
          this.imgBase64 = 'data:image/jpg;base64,' + res.photoBase64
          document.getElementById('snapshot').src = this.imgBase64
        } else {
          this.$message.error(`拍照失败：${res.code},${res.message}`)
        }
      })
      this.isLoading = false
    },
    onClearPhoto() {
      document.getElementById('snapshot').src = ''
    },
    checkedAndUploadBase64() {
      if (!this.imgBase64) {
        this.$message.error('请先拍照再上传')
        return
      }
      this.$emit('getBase64', this.imgBase64)
    }
  }
}
</script>
